<template>
	<!-- 采购员采购界面 -->
	<view>
		<view class="titlebox">
			<text class="text">采购中心</text>
			<image class="image" src="../../../static/paimg/搜索.png" mode="" @click="search()"></image>
		</view>
		<view class="pics">
			<scroll-view class="left" scroll-y>
<!-- 				<view class="leftitem" :class="[flag==0?yes:no]"  @click="clickHandle('预警')">
					<uni-badge :text="angle" absolute="rightTop" :offset="[6, 10]" size="small">
						<view class="box"><text>预警</text></view>
					</uni-badge>
				</view> -->
				<view class="leftitem" :class="[flag==1?yes:no]"  @click="clickHandle('采购请求')">采购请求</view>
				<view class="leftitem" :class="[flag==2?yes:no]"  @click="clickHandle('采购记录')">采购记录</view>
				<view class="leftitem" :class="[flag==3?yes:no]" @click="clickHandle('刷新')">刷新</view>
			</scroll-view>
			<!-- 预警 -->
<!-- 			<view  class="scroll" v-show="stoshow">
				<scroll-view class="right" scroll-y>
					<view class="item" v-for="(item,index) in options" :key="index" @click="tosto(index)">
						<view class="box">
							<text class="text1">{{item.name}}</text>
							<text class="text3">编号:[{{item.id}}]</text>
						</view>
						<view class="box">
							<text class="text2">供应商编号:{{item.supplier_id}}</text>
							<text class="text3">仓库编号:{{item.wid}}</text>
						</view>
						<view class="box">
							<text class="text2" style="color:#89c58d;">现有数量:{{item.num}}</text>
							<text class="text3" style="color:#89c58d;">警报数量:{{item.alarmnum}}</text>
						</view>
						<view class="br"></view>
					</view>
					<text v-if="options.length === 0">暂无数据</text>
				</scroll-view>
			</view> -->
			<!-- 采购请求 -->
			<view class="scroll" v-show="reqshow">
				<view>
					<u-subsection class="radio" :list="names" @change="radioChange" height="60" :current="current"></u-subsection>
				</view>
				<scroll-view class="right" scroll-y>
					<view class="item" v-for="(item,index) in optrequest" :key="index" @click="torequest(index)">
						<view class="box">
							<text class="text1">{{item.stoname}}</text>
							<text class="text3">采购编号:{{item.id}}</text>
						</view>
						<view class="box">
							<text class="text2">供应商名称:{{item.supname}}</text>
							<text class="text3">规格:{{item.stospe}}</text>
						</view>
						<view class="box">
							<text class="text2" style="color:#89c58d;">采购数量:{{item.num}}</text>
							<text class="text3">发起人:{{item.whentryname}}</text>
						</view>
						<view class="br"></view>
					</view>
					<text v-if="optrequest.length === 0">暂无数据</text>
				</scroll-view>
			</view>
			<!-- 采购记录 -->
			<view class="scroll" v-show="recshow">
				<view>
					<u-subsection class="radio" :list="numList" @change="sectionChange" height="60" :current="current"></u-subsection>
				</view>
				<scroll-view class="right" scroll-y>
					<view class="item" v-for="(item,index) in optrecord" :key="index" @click="torecord(index)">
						<view class="box">
							<text class="text1">{{item.stoname}}</text>
							<text class="text3">编号:{{item.id}}</text>
						</view>
						<view class="box">
							<text class="text2">供应商名称:{{item.supname}}</text>
							<text class="text3">规格:{{item.stospe}}</text>
						</view>
						<view class="box">
							<text class="text2" style="color:#89c58d;">采购数量:{{item.num}}</text>
							<text class="text3">经手人:{{item.whentryname}}</text>
						</view>
						<view class="br"></view>
					</view>
					<text v-if="optrecord.length === 0">暂无数据</text>
				</scroll-view>
			</view>
		</view>
		<view>
			<u-tabbar :active-color="activeColor" :list="tabBerList" ></u-tabbar>
		</view>
		<view>
			<drag-button name="采购" :isDock="true" :existTabBar="true" @btnClick="btnClick" />
			<u-modal v-model="noticeShow" title='' confirm-text="取消">
				<btnpro></btnpro>
			</u-modal>
		</view>
	</view>
</template>

<script>
	import {mapState} from 'vuex';
	import dragButton from '../../../components/drag-button.vue';
	import btnpro from '../../../components/btnpro';
	export default {
		components: {
			btnpro,
			dragButton
		},
		data() {
			return {
				activeColor: '#17abe3',names:['未完成','已完成','全部'],typevalue:'未完成',noticeShow: false,
				angle:'',flag:'1',yes:"yes",no:"no",reqshow:true,recshow:false,current:'0',
				option:{},options:{},res:{},optrequest:{},optrecord:{},numList:["已下单","待收货","确认签收","全部"]
			}
		},
		onLoad() {
		    this.$store.commit('setRoleId',2)
			this.radioChange(1)
		},
		computed: {
			...mapState([
				'tabBerList',
			])
		},
		onShow:function(){
			var pages = getCurrentPages();
			var currPage = pages[pages.length - 1]; //当前页面
			var name=currPage.name;
			if(name !== undefined ){
				uni.reLaunch({
					url:'/pages/buyer/buy-procuring/buy-procuring'
				})
			}
		},
		methods: {
			btnClick(){
				this.noticeShow = true;
			},
			async clickHandle(e){
				if(e == "采购请求"){
					this.flag=1;
					this.stoshow = false;
					this.recshow = false;
					this.reqshow = true;
					this.radioChange(0);
				}else if(e == "采购记录"){
					this.flag=2;
					this.stoshow = false;
					this.reqshow = false;
					this.recshow = true;
				}else if(e == "刷新"){
					this.flag=3;
					uni.showModal({
						title: '提示',
						content: '重新加载数据需要花费一些时间，是否进行',
						success: function (res) {
							if (res.confirm) {
								uni.showToast({
									title:"正在加载",
									icon:'loading',
									duration:2000
								});
								setTimeout(function() {
									uni.reLaunch({
										url:'/pages/buyer/buy-procuring/buy-procuring'
									})
								}, 2000);
							} else if (res.cancel) {
								uni.reLaunch({
									url:'/pages/buyer/buy-procuring/buy-procuring'
								})
							}
						}
					});
				}
			},
			tosto(e){
				uni.navigateTo({
					url:'/pages/public/stock/stoctmentord?id=' + this.options[e].id
				})
			},
			async radioChange(e){
				if(e== 2){
					const res = await this.Request({
						url:'api/procurerequest/getallreqdata',
					})
					this.optrequest = res.data;
				}else if(e== 1){
					const res = await this.Request({
						url:'api/procurerequest/getreqdataby',
						method:'POST',
						data:{whether:'已完成'}
					})
					this.optrequest = res.data;
				}
				else if(e==0){
					const res = await this.Request({
						url:'api/procurerequest/getreqdataby',
						method:'POST',
						data:{whether:'未完成'}
					})
					this.optrequest = res.data;
				}
			},
			async sectionChange(index){
				var account = uni.getStorageSync('account')
				if(index == 3){
					const res = await this.Request({
						url:'api/procurerecord/getallrecdata',
						method:'POST',
						data:{account:account}
					})
					this.optrecord = res.data;
				}else if(index == 2){
					const res = await this.Request({
						url:'api/procurerecord/getrecdata',
						method:'POST',
						data:{account:account,state:'确认签收'}
					})
					this.optrecord = res.data;
				}else if(index == 1){
					const res = await this.Request({
						url:'api/procurerecord/getrecdata',
						method:'POST',
						data:{account:account,state:'待收货'}
					})
					this.optrecord = res.data;
				}else if(index == 0){
					const res = await this.Request({
						url:'api/procurerecord/getrecdata',
						method:'POST',
						data:{account:account,state:'已下单'}
					})
					this.optrecord = res.data;
				}
			},
			torequest(e){
				uni.navigateTo({
					url:'/pages/public/procure/procure_request_page?id=' + this.optrequest[e].id
				})
			},
			torecord(e){
				uni.navigateTo({
					url:'/pages/public/procure/procure_record_page?id=' + this.optrecord[e].id
				})
			},
			search(){
				console.log("搜索")
			}
		}
	}
</script>

<style lang="scss">
	.titlebox{
		height: 50px;
		display: flex;
		background-color: #ffa53d;
		.text{
			margin: auto 0;
			margin-left: 20px;
			font-size: 170%;
			color: #fff;
		}
		.image{
			margin: auto 0;
			height: 30px;
			width:  30px;
			margin-left: 200px;
		}
	}
	.pics{
		height: 100%;
		display: flex;
		.left{
			display: flex;
			width: 70px;
			height: 100%;
			border-right: 2px solid #ffa53d;
			.leftitem{
				height: 40px;
				font-size: 105%;
				font-weight: 600;
				line-height: 60px;
				text-align: center;
				.box {
					width: 40px;
					height: 40px;
					display: flex;
					font-size: 105%;
					align-items: center;
				}
			}
		}
		.scroll{
			.radio{
				margin-left: 10px;
				width: 280px;
			}
			.right{
				margin-left: 10px;
				.item{
					margin-top: 8px;
					position: relative;
					.br{
						margin-top: 2px;
						height: 1px;
						width: 100%;
						background-color: #999999;
					}
					.box{
						width: 100%;
						.text1{
							font-size: 120%;
							font-weight: 600;
						}
						.text2{
							color: #b7e481;
						}
						.text3{
							width: 130px;
							float:right;
						}
					}
				}
			}
		}
	}
	.yes{
		color: #ffaa00;
		border-left: 4px solid #ffa53d;
	}
</style>
